<template>
  <div class="box">
    <div class="content">
      <div class="student">
        <ul class="student-info">
          <li>
            <span class="title">班级：</span>
            <span class="text">{{ tableData.className }}</span>
          </li>
          <li>
            <span class="title">得/扣分数：</span>
            <span class="text">{{ tableData.totalMarkScore }}</span>
          </li>
          <li>
            <span class="title">检查类型：</span>
            <span class="text">{{ activeName }}</span>
          </li>
          <li>
            <span class="title">检查时间：</span>
            <span class="text">{{ tableData.examineTime }}</span>
          </li>
        </ul>
      </div>
      <!-- 扣分详情 -->
      <div class="deduct-points">
        <a-table
          :columns="columns"
          :data-source="tableData.roomVOList"
          :row-key="record => record.id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'markUserPhone'">
              {{ record.markUserPhone ? record.markUserPhone : '--' }}
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button
                type="primary"
                size="small"
                ghost
                @click="onDeta(tableData.examineTime, record, activeId)"
                >查看</a-button
              >
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const tableData = ref([]);
let activeName = ref('');
let activeId = ref('');
onMounted(() => {
  let data = JSON.parse(sessionStorage.getItem('tableDate'));
  if (route.query.record) {
    tableData.value = JSON.parse(route.query.record);
    activeName.value = route.query.activeName;
    activeId.value = route.query.activeId;
  } else if (data) {
    if (data) {
      tableData.value = data.record;
      activeName.value = data.activeName;
      activeId.value = data.activeId;
    }
  } else {
    router.push('/check/classCollective');
  }
  let bodySty = document.getElementById('myApp');
  bodySty.setAttribute('class', 'bodyStyle');
});
const columns = reactive([
  {
    key: 'dormitoryName',
    title: '宿舍楼',
    dataIndex: 'dormitoryName',
    scopedSlots: { customRender: 'dormitoryName' }
  },
  {
    key: 'roomName',
    title: '房间名',
    dataIndex: 'roomName',
    scopedSlots: { customRender: 'roomName' }
  },
  {
    key: 'roomScore',
    title: '得/扣分',
    dataIndex: 'roomScore',
    scopedSlots: { customRender: 'roomScore' }
  },
  {
    key: 'createUserName',
    title: '检查人',
    dataIndex: 'createUserName',
    scopedSlots: { customRender: 'createUserName' }
  },
  {
    key: 'markUserPhone',
    title: '检查人电话',
    dataIndex: 'markUserPhone',
    scopedSlots: { customRender: 'markUserPhone' }
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]);
// 查看详情
const onDeta = (examineTime, record, activeId) => {
  console.log(activeName.value, 'activeName.value');
  let obj = {
    record: tableData.value,
    activeName: activeName.value,
    activeId: activeId
  };
  sessionStorage.setItem('tableDate', JSON.stringify(obj));
  router.push({
    path: '/classCollective/interiorDeta/deduct',
    query: {
      classId: tableData.value.classId,
      roomId: record.roomId,
      examineDate: record.examineTime,
      roomName: record.dormitoryName + record.roomName,
      activeId: activeId
    }
  });
};
</script>

<style lang="less" scoped>
.box {
  background: #f2f2f2;
  // padding: 50px 120px 24px;
  min-height: 100vh;
  .content {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
    .student {
      border: 1px solid #e4b778;
      border-radius: 4px;
      padding: 24px;
      width: 100%;
      margin-bottom: 24px;
      .student-info {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
        li {
          padding: 12px 0;
          font-size: 14px;
          margin-right: 40px;
          .title {
            color: #999999;
            display: inline-block;
          }
          .text {
            color: #222222;
          }
          .red {
            color: #ff0000;
          }
        }
      }
    }
    .deduct-points {
      margin-bottom: 32px;
      &-content {
        padding: 14px 16px;
        background: #f8f8f8;
        border-radius: 4px;
        margin-top: 20px;
        display: flex;
        align-items: center;
      }
      .content-details {
        width: 40%;
        .porject {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 0;
          line-height: 32px;
          li {
            width: 30%;
            font-size: 14px;
            .points {
              color: #999999;
            }
            .deduct {
              color: #222222;
            }
          }
        }
        .personal-porject {
          .personal-info {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            color: #222222;
            .personal-info-content {
              color: #999999;
            }
          }
          .personal-info + .personal-info {
            margin-top: 16px;
          }
          .personal-info::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #bb964b;
            border-radius: 50%;
            margin-right: 8px;
          }
        }
      }
      .content-img-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        .content-img {
          width: 86px;
          height: 86px;
          border-radius: 4px;
          background: #f2f2f2;
          margin: 12px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .mark,
      .no-found {
        padding: 14px 16px;
        background: #f8f8f8;
        border-radius: 4px;
        margin-top: 20px;
      }
      .no-found {
        text-align: center;
        padding: 32px;
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        color: #666666;
      }
    }
  }
}
/deep/textarea.micro-dormitory-input {
  border: 0;
  background: transparent;
  resize: none;
}
/deep/.micro-dormitory-input:focus {
  box-shadow: none;
}
</style>
